<template>
  <div>
    <el-form
      v-loading="loading"
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
    >
      <el-form-item label="通知名称">
        <el-input
          v-model="formInline.informName"
          placeholder="通知名称"
        ></el-input>
      </el-form-item>

      <el-form-item label="发布人">
        <el-input v-model="formInline.creator" placeholder="发布人"></el-input>
      </el-form-item>

      <div style="float: right">
        <el-button type="primary" @click="Declaremessagelist">查询</el-button>
        <el-button
          type="success"
          class="el-icon-plus"
          @click="DeclaremessageAdd"
          >新增</el-button
        >
      </div>
    </el-form>
    <div>
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        border
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="informName" label="通知名称" width="200">
        </el-table-column>
        <el-table-column prop="receiverTypeId" label="通知类型" width="200">
          <template #default="xq">
            <span v-if="xq.row.receiverTypeId == '1'">所有人</span>
            <span v-if="xq.row.receiverTypeId == '2'">部门</span>
            <span v-if="xq.row.receiverTypeId == '3'">角色</span>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="发布人" width="200">
        </el-table-column>
        <el-table-column prop="receiverTypeItem" label="接收人数" width="200">
          <template v-slot="Count">
            <span>{{ Count.row.receiverTypeItem.split(",").length }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="startDate" label="通知发布时间" width="200">
        </el-table-column>
        <el-table-column prop="endDate" label="通知关闭时间" width="200">
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="xq">
            <el-button
              type="text"
              style="color: aquamarine"
              @click="GetDeclareMessage(xq.$index, xq.row)"
              >详情</el-button
            >

            <el-button
              type="text"
              style="color: cornflowerblue"
              @click="UpdtDeclareMessage"
              >修改</el-button
            >
            <el-button
              type="text"
              style="color: brown"
              @click="DeleteDeclareMessage(xq.$index, xq.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog title="申报" v-model="dialogTableVisible" width="90%">
      <AddDeclareMessage
        @AddClice="AddClice || UpdtDeclareMessage"
      ></AddDeclareMessage>
    </el-dialog>

    <el-dialog title="申报通知详情" v-model="dialogDeclaremessage" width="80%">
      <el-descriptions
        :data="Detail"
        class="margin-top"
        :column="3"
        :size="size"
        border
      >
        <el-descriptions-item label="通知名称">
          <el-tag size="small"> {{ Detail.informName }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="通知类型" prop="receiverTypeId">
        <div>
            <span v-if="Detail.receiverTypeId== '1'">所有人</span>
            <span v-if="Detail.receiverTypeId == '2'">部门</span>
            <span v-if="Detail.receiverTypeId == '3'">角色</span>
        </div>

          
         
        </el-descriptions-item>
        <el-descriptions-item label="创建人">
          {{ Detail.creator }}
        </el-descriptions-item>
        <el-descriptions-item label="申报起始时间">
          {{ Detail.startDate }}
        </el-descriptions-item>
        <el-descriptions-item label="申报结束时间">
          {{ Detail.endDate }}
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ Detail.createDate }}
        </el-descriptions-item>
        <el-descriptions-item label="修改时间">
          {{ Detail.modifyDate }}
        </el-descriptions-item>
        <el-descriptions-item label="接收人数">
          {{ properCount }}
        </el-descriptions-item>
        <el-descriptions-item label="通知内容">
          <span v-html="Detail.informContent"></span>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import { forEach } from "lodash";
import AddDeclareMessage from "./tb_project_declaremessage.vue";
export default {
  components: {
    AddDeclareMessage,
  },

  data() {
    return {
      loading: false,
      properCount: 0,
      dialogTableVisible: false, //添加||修改状态字段
      dialogDeclaremessage: false, //详情状态字段
      tableData: [],
      Detail: {},
      formInline: {
        informName: "",
        creator: "",
      },
    };
  },
  created() {
    this.Declaremessagelist();
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //添加对话框
    DeclaremessageAdd() {
      this.dialogTableVisible = true;
      this.Declaremessagelist();
    },
    //修改对话框
    UpdtDeclareMessage(index, row) {
      this.$router.push(row.id);
      this.dialogTableVisible = true;


      this.Declaremessagelist();
       
    },


    //详情对话框
    GetDeclareMessage(index, row) {
      this.dialogDeclaremessage = true;
      let url =
        "api/tb_project_declaremessage/GetDeclareMessageDetail?id=" +
        row.appendixID;
      this.http.get(url, {}, true).then((res) => {
        this.Detail = res.data[0];
        this.properCount = 0;
        var ids = res.data[0].receiverTypeItem.split(",");
        ids.forEach((element) => {
          this.properCount += 1;
        });
      });
    },
    //列表显示
    Declaremessagelist() {
      // var userlist=JSON.parse(localStorage.user)
      // console.log(userlist)
      // var dept_Id=userlist.dept_Id
      // var role_Id=userlist.role_Id
      // let url =
      //   "api/tb_project_declaremessage/GetDeclaremessageList";
      // this.http.get(url, {}, true).then((res) => {
      //   res.data.forEach(element => {
      //     if(element.receiverTypeId=="1"){    
      //       this.tableData =element;
      //       console.log(tableData)
      //     }
      //     if(element.receiverTypeId=="2"){
      //       var ids=element.receiverTypeItem.split(',')
      //       ids.forEach(element1 => {
      //         if(element1==dept_Id){       
      //           this.tableData =element1;
      //         }
      //       });
      //      }
      //      if(element.receiverTypeId=="3"){
      //       var ids=element.receiverTypeItem.split(',')
      //       ids.forEach(element1 => {
      //         if(element1==role_Id){           
      //           this.tableData =element1;
      //         }
      //       });
      //      }
      //   });
      // });

      let url =
        "api/tb_project_declaremessage/GetDeclaremessageList?informName=" +
        this.formInline.informName +
        "&creator=" +
        this.formInline.creator;
      this.http.get(url, {}, true).then((res) => {
        //this.loading=true;
        this.tableData = res.data;
        console.log(res);
      });
    },
    //列表删除
    DeleteDeclareMessage(index, row) {
      if (confirm("您确定要删除?")) {
        let url =
          "/api/tb_project_declaremessage/DeleteDeclareMessage?id=" +
          row.appendixID;
        this.http.post(url, {}, true).then((res) => {
          if (res.status == true) {
            this.$message.error("删除成功");
            this.Declaremessagelist();
          }
        });
      }
    },
   
   
  },
};
</script>
  <style>
</style>
